
<extend name="Public/main" />
<block name="header">
    <title>{$title}</title>
</block>
<block name="footer">
    <footer class="m-tabbar tabbar-fixed" >

        <a href="javascript:;" class="tabbar-item tabbar-active">
            <span class="tabbar-icon">
                <i class="icon-game"></i>
            </span>
            <span class="tabbar-txt">游戏</span>
        </a>
        <a href="{:U('Gift/index')}" class="tabbar-item">
            <span class="tabbar-icon">
                <i class="icon-gift"></i>
            </span>
            <span class="tabbar-txt">礼包</span>
        </a>
        <a href="{:U('Player/index')}" class="tabbar-item">
            <span class="tabbar-icon">
                <i class="icon-ucenter-outline"></i>
            </span>
            <span class="tabbar-txt">个人中心</span>
        </a>
    </footer>
</block>
<block name="css">
    <style>
        body{
            background-color:#fff;
        }
        .m-list-title {
            margin:0 0.3rem;
            border-bottom:1px #ddd solid;
            font-size: 0.28rem;
            color: #242424;
            padding:0.48rem 0 0.3rem 0;
        }

        .list-theme4 .list-item .list-mes {
            padding-top: 0.24rem;
        }
        .list-theme4 .list-item .list-mes .list-title{
            font-size:0.32rem;
            color:#000000;
        }

        .list-theme4 .list-item{
            padding:0.3rem 0;
        }
        .list-mes-item p{
            font-size:0.24rem;
            color:#8f8f8f;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }
        .list-theme4 .list-item .list-mes .list-mes-item{
            padding-top: .12rem;
        }
        .btn-xs {
            text-align: center;
            position: relative;
            pointer-events: auto;
            height: 0.56rem;
            line-height: 0.56rem;
            font-size: 0.24rem;
            display: inline-block;
            padding: 0 .15rem;
            border-radius: 3px;
            margin: 0 .12rem;
            color: #09bb07;
            border: 1px #09bb07 solid;
            width: 1.12rem;
        }
        .btn-primary{
            background:none;
        }
        .boo-fr {
            position: absolute;
            top: 52%;
            right: -0.12rem;
            margin-top: -5%;
        }
        .hot-list-v{

        }
        .hot-list-v li{
            float:left;
            padding:0.3rem 0 0.3rem 0.45rem;
            width: 1.74rem;
        }
        .hot-list-icon {
            width: 1.28rem;
            height: 1.28rem;
        }
        .hot-list-icon img{
            width: 100%;
            height: 100%;
        }
        .hot-list-name{
            padding-top:0.2rem;
            color:#242424;
            font-size:0.28rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            text-align: center;
        }
        .hot-list-num{
            font-size:0.22rem;
            color:#8f8f8f;
            text-align: center;
            padding-top:0.14rem;
            padding-bottom:0.2rem;
        }
        .m-list.list-theme4 .list-item span{
            font-size:0.28rem;
            line-height: 1.4rem;
            margin-right:0.3rem;
        }
        .list-theme4 {
            padding: 0 0.3rem;
        }
    </style>
</block>
<block name="content">
    <div style="position:relative;margin-bottom:.1rem;">
        <div class="m-slider" id="J_Slider">
            <!--banner 图片轮播 -->
            <div class="slider-wrapper">
                <volist name="banner" id="vo">
                    <div class="slider-item">
                        <a href="{$vo.url|default='javascript:void(0);'}">
                            <img src="{$vo.img}">
                        </a>
                    </div>
                </volist>
            </div>
            <div class="slider-pagination"></div><!-- 分页标识 -->
        </div>
        <div class="user-info">
            <a href="javascript:void(0);">
                <img class="user-avatar" src="{$user.avatar|default='__IMG__/default.png'}" />
            </a>
            <div>
                <h1>{$user.nick_name|default='无名氏'}</h1>
                <p>ID:{$user.id|default='获取失败'}</p>
            </div>
        </div>
    </div>

    <present name="his">
        <div class="m-list-title">我的游戏</div>
        <ul class="boo-list-v">
            <volist name="his" id="vo">
                <li class="boo-list-item">
                    <a href="{$vo.url}">
                        <div class="boo-list-icon"><img src="{$vo.img}"></div>
                        <div class="boo-list-txt"><span>{$vo.title}</span></div>
                    </a>
                </li>
            </volist>
        </ul>
    </present>

    <div style="height:0.2rem;background-color:#f4f4f4;"></div>
    <!-- 今日推荐榜 -->
    <div class="m-list-title">今日推荐榜</div>
    <section >
        <ul class="m-list list-theme4">
            <foreach name="sift" item="sift_vo" key="k">
                <li class="list-item">
                    <span style="<if condition='$k == 0'>color:#f44837;<elseif condition='$k == 1'/>color:#ff8833;<elseif condition='$k == 2' />color:#ffbb33;<else />color:#8f8f8f;</if>">{$k+1}</span>
                    <div class="list-img">
                        <img class="lazy"  src="{$sift_vo.img}" >
                    </div>
                    <div class="list-mes">
                        <h3 class="list-title">{$sift_vo.title}</h3>
                        <div class="list-mes-item">
                            <p class="">
                                {$sift_vo.subtitle}
                            </p>
                        </div>
                        <div class="boo-fr">
                            <a href="{$sift_vo.url}" class="btn btn-xs btn-primary J_Link" data-page="{$sift_vo.page}">
                                打开
                            </a>
                        </div>
                    </div>
                </li>
            </foreach>
        </ul>
    </section>
    <a href="/game/index.php?m=Home&c=Index&a=detail&id=178">
        <img src="__IMG__/banner4.jpg" width="100%"/>
    </a>
    <div class="m-list-title">人气精选</div>
    <ul class="hot-list-v">
        <volist name="hot_game" id="item">
            <li>
                <div class="hot-list-icon"><img src="../appc/Uploads/{$item.icon}"></div>
                <div class="hot-list-name"><span>{$item.name}</span></div>
                <div class="hot-list-num"><if condition="$item['num'] egt 1000">{:intval($item['num']/1000)}万人在玩<else />{:intval($item['num'])}人在玩</if></div>
                <a href="{:U('Index/detail', array('id'=>$item['game_id']))}" class="btn btn-xs btn-primary J_Link" data-page="{$sift_vo.page}">
                    打开
                </a>
            </li>
        </volist>
    </ul>

    <a href="/game/index.php?m=Home&c=Index&a=detail&id=168">
        <img src="__IMG__/banner5.jpg" width="100%"/>
    </a>
    <!-- 游戏列表 -->
    <div class="m-list-title">全部游戏</div>
    <section id="J_List">
        <ul id="J_ListContent" class="m-list list-theme4"></ul>
    </section>
</block>

<block name="script">
    <script src="__JS__/vconsole.min.js"></script>
    <!-- 引入Template 脚本-->
    <script src="__JS__/template.js"></script>

    <script id="J_ListHtml" type="text/html">
        {{each list as data}}
        <li class="list-item">
            <div class="list-img">
                <img class="lazy"  data-url="{{data.img}}" >
            </div>
            <div class="list-mes">
                <h3 class="list-title">{{data.title}}</h3>
                <div class="list-mes-item">
                    <p class="">
                        {{data.subtitle}}
                    </p>
                </div>
                <div class="boo-fr">
                    <a href="{{data.url}}" class="btn btn-xs btn-primary J_Link" data-page="{{list.page}}">
                        打开
                    </a>
                </div>
            </div>
        </li>
        {{/each}}
    </script>

    <script>
        !function ($) {
            var type = "{$type}";

            if(type == 'app'){
                window.location.href = 'szwzaction://2';
            }

            var dialog= YDUI.dialog;
            $('#J_Slider').slider({
                speed: 200,
                autoplay: 2000,
                lazyLoad: true
            });

            var page = 1, pageSize = 10;
            var loadMore = function (callback) {
                $.ajax({
                    url: '{:U("Index/gameList")}',
                    dataType: 'json',
                    type:'post',
                    data: {
                        page: page,
                        pagesize: pageSize
                    },
                    success: function (ret) {
                        typeof callback == 'function' && callback(ret);
                    },error : function(ex) {
                        alert('网络错误');
                    }
                });
            };


            $('#J_List').infiniteScroll({
                pageSize: pageSize,
                initLoad: true,
                jumpLink: '.J_Link',
                loadingHtml: '<img src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/><br />正在加载<br /><br />我赞提供技术支持',
                doneTxt : '<img src="__IMG__/logo.png"/><br />我赞科技提供技术支持',
                loadListFn: function () {
                    var def = $.Deferred();
                    loadMore(function (listArr) {
                        var html = template('J_ListHtml', {list: listArr});
                        $('#J_ListContent').append(html);
                        $('img.lazy').lazyLoad({attr:'data-url'});
                        def.resolve(listArr);
                        ++page;
                    });

                    return def.promise();
                }
            });
        }(jQuery);
    </script>
</block>